<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title></title>
		<link rel="stylesheet" href="">
	</head>
	<style>
		.wrap{
			width: 50%;
		}
		.box{
			position: relative;
			width: 100%;
			height: 0px;
			/* 用来实现宽高等比例 1:1 padding-bottom:100%; 4:3 padding-bottom:75%; 16:9 padding-bottom:56.25%; */ 
			padding-bottom: 56.25%;
			background: pink;
		}
		.box img{
			position: absolute;
			width: 100%;
			height: 100%;
		}
	</style>
	<body>
		<div class="wrap">
			<div class="box">
				<img src="Penguins.jpg" alt="">
			</div>
		</div>
		
	</body>
</html>